<template>
  <!-- dropdown
          默认插槽：默认显示的文本内容
          具名插槽(dropdown):下拉 菜单
             el-dropdown-menu
                 el-dropdown-item  

        点击事件
           el-dropdown-item  command="标识"
           el-dropdown  @command="(command)=>{command就是点击项的command的值}"
  
   -->
  <el-dropdown @command="commandEvent">
    <svg-icon
      style="color:#fff;font-size:20px;"
      iconClass="language"
    ></svg-icon>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh" :disabled="$i18n.locale === 'zh'"
          >中文</el-dropdown-item
        >
        <el-dropdown-item command="en" :disabled="$i18n.locale === 'en'"
          >English</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script>
import jsCookie from 'js-cookie'
export default {
  name: 'HmI18n',
  methods: {
    commandEvent (command) {
      // 语言切换
      this.$i18n.locale = command
      // 部分国际化数据可能 不是响应式更新，需要刷新页面
      // js-cookie  get(key)   set(key,value)  remove(key)
      jsCookie.set('lang', command)
      this.$router.go(0)
    }
  }
}
</script>
<style></style>
